<template>
  <div class="number" ref="number"></div>
</template>

<script>
export default {
  name: 'NumAnimate',
  props: {
    allUserNumber: Number,
    allAreaNumber: Number
  },
  data () {
    return {}
  },
  mounted () {
    var dom = this.$refs.number
    this.digit({
      number: this.allUserNumber || this.allAreaNumber, // 到达指定数值停止滚动
      finish: 5, // 整体完成时间
      speed: 1, // 数值越大，越多数字同时进行翻滚，取值范围（1 ~ 10）
      direction: 'right', // 动画方向
      dom: dom // 在指定dom节点插入动画
    })

    // digit.render() // 执行
  },
  methods: {
    digit (a) {
      console.log(a)
      this.render(a)
    },
    b (a, b) {
      let g
      let h
      const e = this.d(b)
      const f = e.toString().length
      for (g = 0; f > g; g++) {
        h = document.createElement('div')
        h.className = e[g] !== ',' && e[g] !== '.' ? 'to__led-number' : 'to__led-number to__led-number--no'
        h.innerHTML = e[g]
        a.appendChild(h)
      }
    },
    c (a, b, c) {
      function i () {
        return h === 9 ? (h = 0) : h++
      }
      let e
      let f
      let g
      let h
      let j
      let k
      let d = a.childNodes.length - 1
      for (e = 0; e < a.childNodes.length; e++) {
        f = c === 'left' ? a.childNodes[e] : a.childNodes[d]
        g = f.innerHTML
        h = 0
        f.innerHTML = ''
        g !== ',' && g !== '.' && (b.timerTemp += b.single)
        j = (0.5 * b.timerTemp) / b.speed
        k = b.timerTemp - j
        this.a(f, g, i, k, j)
        d--
      }
    },
    d (a) {
      let c, d, g, h
      a = (Array(7).join('0') + a).slice(-7) // 不够7位数补全
      for (a = a.toString(), c = a.split('.'), d = c[0], g = d, h = 1; h <= Math.floor((d.length - 1) / 3); h++) {
        g = this.e(g, d.length - 3 * h)
      }
      return g
    },
    e (a, b) {
      // return a.slice(0, b) + c + a.slice(b)
      return a.slice(0, b) + a.slice(b)
    },
    a (a, b, i, k, j) {
      setTimeout(function () {
        if (((a.innerHTML = b), b !== ',' && b !== '.')) {
          a.innerHTML = b
          const c = setInterval(function () {
            a.innerHTML = i()
          }, 50)
          setTimeout(function () {
            clearInterval(c)
            a.innerHTML = b
          }, 500 * k)
        } else a.innerHTML = b
      }, 500 * j)
    },
    render (a) {
      const d = a.direction
      const e = a.finish
      const f = a.speed
      const g = a.number.toString().length - 1
      const h = Number((e / g).toFixed(2))
      const i = {
        number: g,
        single: h,
        speed: f,
        timerTemp: 0
      }
      i.timerTemp -= i.single
      this.b(a.dom, a.number, i)
      this.c(a.dom, i, d)
    }
  }
}
</script>

<style lang="less" scoped>
.number {
  background: rgb(12, 16, 61);
  font-family: unidreamLED;
  font-size: 64px;
  color: rgb(61, 202, 237);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  /deep/.to__led-number {
    position: relative;
    margin-right: 13px;
    font-size: 50px;
    width: 38px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border: 2px solid rgba(105, 123, 148, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>
